<template>
  <view class="MyApp">
    <view class="top">
      <u-image
        width="60px"
        height="60px"
        shape="round"
        :src="Info.avatar ? Info.avatar : '/static/img-头像@2x.png'"
      ></u-image>
      <view class="name">{{ Info.name }}</view>
      <view class="code"> 司机编号：{{ Info.number }} </view>
      <view class="phone"> 手机号：{{ Info.phone }} </view>
    </view>
    <view class="center">
      <view class="task">
        <view class="title">- 本月任务 -</view>
        <view class="list">
          <view>
            <text>{{ Task.taskAmounts }}</text>
            <view>任务总量</view>
          </view>
          <view>
            <text>{{ Task.completedAmounts }}</text>
            <view>完成任务量</view>
          </view>
          <view>
            <text>{{ Task.transportMileage }}</text>
            <view>运输里程(km)</view>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom">
      <u-cell-group :border="false">
        <u-cell
          size="large"
          :border="false"
          title="车辆信息"
          isLink
          url="/pages/componentsB/tag/tag"
        ></u-cell>
        <u-cell
          :border="false"
          title="任务数据"
          isLink
          url="/pages/componentsB/badge/badge"
        ></u-cell>
        <u-cell
          :border="false"
          title="系统设置"
          isLink
          url="/pages/componentsB/badge/badge"
        ></u-cell>
      </u-cell-group>
    </view>
  </view>
</template>

<script>
export default {
  name: "MyPage",
  components: {},
  data() {
    return {
      Info: {},
      Task: {},
    };
  },
  created() {},
  mounted() {},
  onShow() {
    this.getInfo();
    this.getTask();
  },
  async onLoad() {
    // 获得用户信息
  },
  methods: {
    // 获取用户信息
    async getInfo() {
      let {
        data: { data },
      } = await uni.$http.get("/users");
      this.Info = data;
    },
    // 获取任务信息
    async getTask() {
      const year = new Date().getFullYear();
      const month = new Date().getMonth() + 1;
      let {
        data: { data },
      } = await uni.$http.get("/users/taskReport", {
        year,
        month,
      });
      this.Task = data;
    },
  },
};
</script>

<style lang="scss">
.MyApp {
  background-color: #f5f5f5;
  height: 630px;
}
/deep/ .u-image {
  margin: 0 auto;
  margin-top: 20px;
}
.top {
  background-color: #ef4f3f;
  height: 250px;
  //左下，右下的圆角为10px
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  .name {
    text-align: center;
    margin-top: 10px;
    color: #fffffe;
    font-size: 20px;
    font-weight: bold;
  }
  .code,
  .phone {
    text-align: center;
    margin-top: 10px;
    color: #fffffe;
    font-size: 14px;
  }
}
.center {
  margin: 0 15px;
  background-color: #ffffff;
  padding-top: 15px;
  margin-top: -45px;
  border-radius: 10px;
  height: 130px;
  .title {
    text-align: center;
    margin-bottom: 20px;
    margin-right: 12px;
  }
  .list {
    display: flex;
    justify-content: space-around;
    text-align: center;
    view {
      text {
        font-weight: bold;
      }
      view {
        margin-top: 15px;
        font-size: 12px;
      }
    }
  }
}
.bottom {
  margin: 0 15px;
  background-color: #ffffff;
  margin-top: 15px;
}
</style>
